<template>
  <el-card shadow="hover" style="background-color:Transparent;margin-bottom: 20px;">
    <el-row justify="space-between">
      <el-col :span="6" class="grid-content icon-group">
        <el-icon :style="`color: ${data.isFinish ? 'blue' : 'red'};`" @click="doingIcon">
          <Warning v-if="!data.isFinish" />
          <CircleCheck v-if="data.isFinish" />
        </el-icon>
        <!-- #F56C6C 红色  #67C23A 绿色 -->
        <el-icon :style="`color:${data.isFlag ? '#F56C6C' : '#67C23A'};`" @click="flagClick">
          <Flag />
        </el-icon>

        <el-tag v-show="data.group" :type="data.isRelease ? 'success' : 'danger'" style="margin-right: 5px;">
          {{ data.group }}</el-tag>
      </el-col>
      <el-col :span="13" class="grid-content">
        <el-popover placement="top-start" title="" :width="200" trigger="hover" :content="data.title">
          <template #reference>
            <el-text :tag="`${data.isFinish ? 'del' : 'p'}`" :type="`${data.isFlag ? 'danger' : ''}`" truncated>
              {{ data.title }}</el-text>
          </template>
        </el-popover>
      </el-col>
      <el-col :span="1" class="grid-content dropdown-group">
        <el-dropdown @command="updateOrDelete">
          <el-icon style="line-height: 24px;">
            <Setting />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">
                <el-icon>
                  <Edit />
                </el-icon></el-dropdown-item>
              <el-dropdown-item command="2">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>

    <el-divider>
      <el-icon :color="`${data.isRelease ? 'blue' : 'red'}`">
        <star-filled v-if="!data.isRelease" />
        <SuccessFilled v-if="data.isRelease" />
      </el-icon>
    </el-divider>

    <div>
      <el-row v-for="(item) in data.project" style="margin: 5px 0;">
        <el-col :span="11">
          <el-text size="small">{{ item.project }}</el-text>
        </el-col>
        <el-col :span="13">
          <el-text size="small">{{ item.branch }}</el-text>
        </el-col>
      </el-row>
      <el-divider content-position="left">
        <el-icon>
          <ChatDotRound />
        </el-icon>
      </el-divider>
    </div>

    <div>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="(item, index) of data.desc" :name="index">
          <template #title>
            <el-text :style="`color: ${item.isFinish ? '#909399' : '#ff4949'}`" size="small" truncated>
              {{ item.desc }}
            </el-text>
          </template>

          <div style="margin-bottom: 5px;">
            <el-text size="small" v-html="item.descn"></el-text>
          </div>
          <div>
            <el-tag v-for="tag of item.project" style="margin-right: 5px;">
              {{ tag }}
            </el-tag>
          </div>

          <div class="doto_divider">
            <el-divider border-style="dashed" content-position="right">
              <el-switch v-model="item.isFinish" class="ml-2" @change="descFinishChange"
                style="--el-switch-on-color: #909399; --el-switch-off-color: #ff4949" />
            </el-divider>
          </div>

        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>

  <el-dialog v-model="centerDialogVisible" title="删除提示" width="25%" center>
    <span>
      确定删除 <strong>{{ data.title }}</strong> 代办事项吗？
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteCard(false)">取消</el-button>
        <el-button type="danger" @click="deleteCard(true)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { Card } from '@/types/card'
import { ref, toRefs } from 'vue';
import { useDotoStore } from '@/stores/dotoStore'
import { useRouter } from "vue-router"

// 数据对象
const dotoStore = useDotoStore()
const props = defineProps<{ data: Card }>()
const { data } = toRefs(props)

// 标签被点击
const flagClick = () => {
  data.value.isFlag = !data.value.isFlag
  dotoStore.writeDotoToLocalStorage()
}

// 是否完成点击
const doingIcon = () => {
  data.value.isFinish = !data.value.isFinish
  dotoStore.writeDotoToLocalStorage()
}

// 设置点击
const router = useRouter()
const centerDialogVisible = ref<boolean>(false)
const updateOrDelete = (val: String) => {
  if (val === '1') {
    // 修改
    router.push({
      name: 'addDoto',
      query: {
        doto: data.value.id
      }
    })

  } else {
    // 删除
    centerDialogVisible.value = true
  }
}
const deleteCard = (x: boolean) => {
  if (x) {
    dotoStore.deleteDoto(data.value.id)
  }
  centerDialogVisible.value = false
}

// 描述详情
const activeName = ref<Number>()

// 描述详情完成状态改变
const descFinishChange = () => {
  let descs = data.value.desc
  let num = descs.filter(item => item.isFinish)
  data.value.isFinish = num.length === descs.length
  dotoStore.writeDotoToLocalStorage()
}

</script>
<style>
.dropdown-group {
  cursor: pointer;
}

.icon-group {
  display: flex;
  align-items: center;
}

.icon-group i {
  margin: 0 1px;
  cursor: pointer;
}

.doto_divider .el-divider--horizontal {
  margin: 20px 0 0;
}
</style>